<template>
  <!-- 快速注册页面 -->
  <div class="Quick-registration">
    <!-- 导航栏头部 -->
    <van-nav-bar title="快速注册"
                 left-arrow
                 @click-left="$router.back()" />
    <!-- 提示标签栏 -->
    <van-notice-bar color="#d1d9e0"
                    scrollable
                    background="#ecf9ff">
      为了确保服务质量,请先验证您的手机
    </van-notice-bar>
    <!-- 注册表单 -->
    <van-form @submit="onSubmit">
      <van-field v-model="userphone"
                 name="userphone"
                 label="手机号"
                 placeholder="请填写手机号"
                 :rules="userRulers.uphone">
        <i slot="left-icon"
           class="jiazheng icon-dianhua"></i>
      </van-field>
      <van-field v-model="password"
                 type="password"
                 name="password"
                 label="密码"
                 placeholder="请填写密码"
                 :rules="userRulers.upassword">
        <i slot="left-icon"
           class="jiazheng icon-mima"></i>
      </van-field>
      <van-field v-model="yanzhengma"
                 name="yanzhengma"
                 label="验证码"
                 placeholder="请填写验证码"
                 :rules="userRulers.uyanzhengma"
                 maxlength='6'>
        <i slot="left-icon"
           class="jiazheng icon-mimayanzhengma"></i>
      </van-field>
      <van-field v-model="nicheng"
                 name="nicheng"
                 label="昵称"
                 placeholder="请输入昵称"
                 :rules="[{ required: true, message: '请正确填写昵称!' }]">
        <i slot="left-icon"
           class="jiazheng icon-nicheng"></i>
      </van-field>
      <!-- 复选框 -->
      <van-field name="checkboxGroup"
                 label="">
        <template #input>
          <van-checkbox-group v-model="checkboxGroup"
                              direction="horizontal">
            <van-checkbox name="1"
                          shape="square"
                          :checked='ffoo'
                          @click="adddd">同意<span style="color:#9acca8">&lt;&lt;W家政帮用户协议>></span>和<span style="color:#9acca8">&lt;&lt;隐私协议>></span></van-checkbox>
          </van-checkbox-group>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button block
                    type="info"
                    class="infobtn"
                    native-type="submit"
                    :disabled='ooff'>
          注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { setItem, getItem } from '@/mock/wsm.js'
export default {
  name: 'QuickRegistration',
  props: {},
  components: {},
  data () {
    return {
      userphone: '13111111111',
      password: '12345678',
      yanzhengma: '888888',
      nicheng: '秘制小汉堡',
      checkbox: true,
      checkboxGroup: [],
      ooff: true,
      ffoo: false,
      // 表单验证规则
      userRulers: {
        uphone: [
          {
            required: true,
            message: '请填写手机号!'
          },
          {
            pattern: /^1[3|5|7|8|9]\d{9}$/,
            message: '手机号码格式不正确'
          }
        ],
        upassword: [
          {
            required: true,
            message: '请填写密码!'
          },
          {
            pattern: /^\d{8}$/,
            message: '密码格式不正确，为了您的账户安全，密码长度不能小于8位'
          }
        ],
        uyanzhengma: [
          {
            required: true,
            message: '请正确填写验证码!'
          },
          {
            pattern: /^\d{6}$/,
            message: '密码格式不正确，请输入6位验证码'
          }
        ]
      }
    }
  },
  created () {

  },
  mounted () {
  },
  methods: {
    submit () {

    },
    adddd () {
      this.ooff = !this.ooff
    },
    onSubmit (values) {
      console.log('submit', values)
      setItem('zhongqinghua', values)
      this.$toast('注册成功！')
      this.$router.push('/RapidEnrollment')
      // setItem('userphoto', values)
      // getItem('userphoto')
    }
  },
  computed: {
  }
}
</script>

<style scoped lang="less">
.van-nav-bar {
  height: 120px;
}
/deep/ .van-notice-bar__wrap {
  justify-content: center;
}
.van-cell {
  font-size: 24px;
}
.van-cell {
  font-size: 24px;
}
.infobtn {
  background-color: #1196db;
  border: 1px solid transparent;
}
.toregiste {
  color: #1196db;
  font-size: 10px;
  margin-left: 30px;
}
</style>
